<template>
    <div class="box">
        <van-nav-bar title="提现" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div v-if="flag">
            <!-- 绑定微信号 -->
            <!-- <van-field  label="微信号" placeholder="微信号" readonly required :rules="[{ validator: nicknameValidator, message: '请填写姓名' }]">
                    <template #input>
                        <van-image :src="form.avatar" v-show="form.avatar" width="30"></van-image>{{form.nickname}}
                    </template>
                    <template #button>
                        <van-button size="small" type="primary" @click="bindWX" native-type="button">绑定微信</van-button>
                    </template>
                </van-field> -->
            <van-tabs>
                <van-tab title="微信">
                    <van-form @submit="onSubmit">
                        <van-field v-model="form.wxname" label="微信号" placeholder="微信号" required
                            :rules="[{ required: true, message: '请填写微信号' }]"></van-field>
                        <van-field name="uploader" label="微信收款码" required
                            :rules="[{ required: true, message: '请上传微信收款码' }]">
                            <template #input>
                                <van-uploader v-model="fileList" :before-read="beforeRead" :after-read="afterRead"
                                    :before-delete="deleteFile" :max-size="2 * 1024 * 1024" :max-count="1"
                                    accept="image/*"/>
                            </template>
                        </van-field>
                        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required
                            :rules="[{ required: true, message: '请填写姓名' }]" />
                        <van-field v-model="form.password" type="password" label="提现密码" placeholder="请输入提现密码" required
                            :rules="[{ validator: passwordverify, message: '请填写6位数的支付密码' }]" />
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">提交</van-button>
                        </div>
                    </van-form>
                </van-tab>

                <van-tab title="支付宝">
                    <van-form @submit="onSubmit">
                        <van-field v-model="form.zfbname" label="支付宝" placeholder="支付宝账号" required
                            :rules="[{ required: true, message: '请填写支付宝账号' }]"></van-field>
                        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required
                            :rules="[{ required: true, message: '请填写姓名' }]" />
                        <van-field v-model="form.password" type="password" label="提现密码" placeholder="请输入提现密码" required
                            :rules="[{ validator: passwordverify, message: '请填写6位数的支付密码' }]" />
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">提交</van-button>
                        </div>
                    </van-form>
                </van-tab>

                <van-tab title="银行卡">
                    <van-form @submit="onSubmit">
                        <van-field v-model="form.numbername" label="银行卡号" placeholder="银行卡号" required
                            :rules="[{ required: true, message: '请填写银行卡号' }]"></van-field>
                        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required
                            :rules="[{ required: true, message: '请填写姓名' }]" />
                        <van-field v-model="form.password" type="password" label="提现密码" placeholder="请输入提现密码" required
                            :rules="[{ validator: passwordverify, message: '请填写6位数的支付密码' }]" />
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">提交</van-button>
                        </div>
                    </van-form>
                </van-tab>
            </van-tabs>


            <div class="rule" @click="rule">点击查看提现规则</div>
        </div>
        <div v-else class="tx_box">
            <van-form @submit="withdraw">
                <div style="background-color:#FAFAFA;height: 40px; line-height: 40px;">
                    <span style="margin-left:20px">到账微信</span><span style="color:#68B889;margin-left: 20px; "
                        @click="qx">{{ form.wxname }}</span>
                </div>
                <div>
                    <div style="height: 40px; line-height: 40px;">
                        <span style="margin-left:20px">提现金额<span
                                style="color:#636363;margin-left: 20px; font-size: 12px;">(提现金额不得小于{{low_fee}})</span></span>
                    </div>
                    <div>
                        <van-field v-model="price" label-width="10px" label="￥" placeholder="请输入提现金额"
                            :rules="[{ validator, message: `提现金额不能小于${low_fee}且不能大于余额` }]" />
                    </div>
                </div>
                <div style="height: 40px; line-height: 40px; font-size: 12px;">
                    <span style="margin-left:20px;color:#636363">可用余额：{{ ye }}元</span><span
                        style="color:#68B889;margin-left: 20px; " @click="qx">全部提现</span>
                </div>
                <div style="height: 40px; line-height: 40px; font-size: 12px;" @click="rule">
                    <span style="margin-left:20px;color:#F58192">不清楚提现规则?点击查看</span>
                </div>
                <div style="margin:100px 16px;">
                    <van-button round block type="primary" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script>
import frontUploadFileMixin from '@/mixin/frontuploadossfile.js';
import frontDeleteFileMixin from '@/mixin/frontdeleteossfile.js';
export default {
    data() {
        return {
            active: 0,
            flag: true,
            form: {
                uploader: [],
                wxname: "",
                zfbname: "",
                numbername: "",
                //avatar: "", //用户头像
                //nickname: "", //微信名
                realname: "", //用户真实姓名
                password: "" //提现密码
            },
            price: "", //提现金额
            ye: 100,//余额
            fileList:[],
            low_fee:"",
            high_fee:""
        };
    },
    mixins: [frontUploadFileMixin, frontDeleteFileMixin],
    methods: {
        nicknameValidator() {
            if (this.form.nickname) {
                return true
            } else {
                return false
            }
        },
        passwordverify(val) {
            return /^\d{6}$/.test(val);
        },
        onClickLeft() {
            this.$router.back();
        },
        async onSubmit() {
            if (this.fileList.length == 1) {
                this.form.uploader = this.fileList[0].url
            }else{
                this.form.uploader = "";
            }
            console.log(this.form);
            let res = await this.$frontaxios.post(this.$front.updatePayUserInfo, this.form);
            if (res.code == 1) {
                this.$dialog.alert({ title: "温馨提示", message: "设置提现密码成功" });
                    setTimeout(() => {
                        location.reload();
                    }, 500);
            } else if (res.code == 2) {
                this.$dialog.alert({ title: "温馨提示", message: "设置提现密码成功,不要重复操作" });
                    setTimeout(() => {
                        location.reload();
                    }, 500);
            } else {
                this.$dialog.alert({ title: "温馨提示", message: "设置提现密码失败,请联系客服" });
            }
        },
        rule() {
            this.$router.push({ name: "rule" });
        },
        qx() {
            this.price = this.ye
        },
        fn() {
            console.log(1);
        },
        validator(val) {
            console.log(val, this.ye);
            if (val > this.ye || val <this.high_fee) {//this.high_fee
                return false
            }
        },
        async withdraw() {
            //let order_no=order_number();
            let rst = await this.$frontaxios.post(this.$front.addPay, { price: this.price })
            if (rst.code == 1) {
                this.$notify({ type: 'success', message: '提现已提交' });
                let a = this.ye - this.price
                this.ye = a
                console.log(this.price);
            }else{
                this.$notify({ type: 'warning', message: '提现失败' });
            }
        }, 
        // async bindWX() {
        //     let res = await this.$frontaxios.get(this.$front.bindWX);
        //     console.log(res);
        //     if (res.code == 1) {
        //         this.$set(this.form, 'avatar', res.data.loginwxavatar);
        //         this.$set(this.form, 'nickname', res.data.loginwxnickname);
        //         this.$dialog.alert({ title: "温馨提示", message: "绑定提现微信成功了" });
        //     } else if (res.code == -2) {
        //         this.$dialog.alert({ title: "温馨提示", message: "绑定提现微信失败了，登录微信和提现微信不一致" });
        //     }
        //     else {
        //         this.$dialog.alert({ title: "温馨提示", message: "绑定提现微信失败了" });
        //     }
        // },// 返回布尔值
        beforeRead(file) {
            if (!Array.isArray(file)) {
                file = [file]
            }
            for (let i = 0; i < file.length; i++) {
                if (file[i].type !== 'image/jpeg' && file[i].type !== 'image/png') {
                    this.$dialog.alert({ title: '温馨提示', message: '请上传 jpg或png 格式图片' });
                    return false;
                }
            }
            return true;
        },
        async afterRead(file) {
            if (!Array.isArray(file)) {
                file = [file]
            }
            let shopname = localStorage.getItem('shopname');
            let phone = localStorage.getItem('phone');
            let path = 'image/tixian/' + phone + '/' + shopname + '/';
            for (let i = 0; i < file.length; i++) {
                let fileUrl = file[i].file;
                file[i].status = 'uploading';
                file[i].message = '上传中...';
                let url = await this.frontFileUpload(fileUrl, path + file[i].file.name, i, this, this.$front.frontuserbucket); //上传到oss
                file[i].url = url;
                file[i].status = 'done'
                file[i].message = '上传成功'
                file[i].path = path + file[i].file.name;
            }
            console.log(this.form.uploader);
        },
        async deleteFile(file) {
            this.deletefrontMultiFile([file.path]);
        }
    },
    async created() {
        let res = await this.$frontaxios.get(this.$front.getPayUserInfo);
        console.log(res);
        if (res.code == 1) {
            this.ye=res.data.myprice;
            this.high_fee=res.data.high_fee;
            this.low_fee=res.data.low_fee;
            this.flag = false;
        }else if(res.code==-2){
            this.$dialog.alert({title:"温馨提示",message:"该网校没有提现设置，不能提现"}).then(()=>{
                this.$router.back();
            })
        } 
        else {
            this.flag = true;
        }
    }
}
</script>
<style lang='scss' scoped>
.box {
    height: 100%;
    background-color: #F3F3F3;
}

.rule {
    width: 100%;
    text-align: center;
    color: #5496D3;
}

.tx_box {
    width: 90%;
    height: 500px;
    background-color: #fff;
    margin: 20px;
}
</style>
